import React, {Component} from "react";
import {currentTime, dateFormat, getMockTime} from "@/utils/time";
import {PageHeaderWrapper} from "@ant-design/pro-layout";
import {Card, DatePicker, Input, Row, Col, Descriptions} from "antd";
import {connect} from "dva";

class Banzu extends Component {
  state = {
    dailyDate: null,
    banbieDate: null,
    option: {}
  }

  async componentDidMount() {
    const payload = await getMockTime("GaoLu")

    const current = new Date(payload.current.getFullYear(), payload.current.getMonth(), payload.current.getDate(), 0, 0, 0)
    this.setState({
      dailyDate:dateFormat(current),
      banbieDate:dateFormat(current)
    })

    // make it better
    // this.state.dailyDate = payload.current
    // this.state.banbieDate = this.state.dailyDate
    // //发送API 请求
    this.getDailyScore()
    this.getBanbieScore()
  }

  //TODO： 后端，对于还没有值的日期，不要传0 和 不及格，区别一下
  dailyTimePick = (value) => {
    if (value != null) {
      this.state.dailyDate = value.format('YYYY-MM-DD HH:mm:ss')
      this.getDailyScore()
    }
  };

  banBieTimePick = (value) => {
    if (value != null) {
      this.state.banbieDate = value.format('YYYY-MM-DD HH:mm:ss')
      this.getBanbieScore()
    }
  };


  getDailyScore = () => {
    const {dailyDate} = this.state;
    const {dispatch} = this.props;

    const payload = {
      date: dailyDate,
    };
    dispatch({
      type: 'gaolu/getDailyScoreEffect',
      payload
    });
  }

  getBanbieScore = () => {
    const payload = {
      date: this.state.banbieDate,
    }
    this.props.dispatch({
      type: 'gaolu/getBanbieEffect',
      payload
    });
  }


  render() {
    const {daliyScore, banbieScore} = this.props
    const {dailyDate, banbieDate} = this.state;

    const displayDailyDate = dailyDate === null ? '日期' : dailyDate.split(" ")[0];
    const displayBanbieDate = banbieDate === null ? '日期' : banbieDate.split(" ")[0];

    const score = daliyScore === undefined ? 0 : daliyScore.score;
    const comment = daliyScore === undefined ? '评级' : daliyScore.comment;

    const morningScore = banbieScore === undefined ? 0 : banbieScore.MO.score;
    const morningComment = banbieScore === undefined ? '评级' : banbieScore.MO.comment;
    const morningBanci = banbieScore === undefined ? '无班次' : banbieScore.MO.banci;

    const noonScore = banbieScore === undefined ? 0 : banbieScore.NO.score;
    const noonComment = banbieScore === undefined ? '评级' : banbieScore.NO.comment;
    const noonBanci = banbieScore === undefined? '无班次':banbieScore.NO.banci;

    const nightScore = banbieScore === undefined ? 0 : banbieScore.NI.score;
    const nightComment = banbieScore === undefined ? '评级' : banbieScore.NI.comment;
    const nightBanci = banbieScore === undefined? '无班次': banbieScore.NI.banci;

    return (
      <PageHeaderWrapper title='班组日均打分'>
        <Row>
          <Card
            style={{width: '100%'}}
            title="日均分数"
            bordered={false}

          >
            <Row style={{padding: `20px 0`}}>
              <DatePicker
                placeholder={'日期选择'}
                onChange={this.dailyTimePick}/>
            </Row>

            <Descriptions layout="vertical" bordered>
              <Descriptions.Item label="日均分数">{score.toFixed(2)}</Descriptions.Item>
              <Descriptions.Item label="评级">{comment}</Descriptions.Item>
              <Descriptions.Item label="日期">{displayDailyDate}</Descriptions.Item>
            </Descriptions>
            <div id="banzu"/>
          </Card>
        </Row>
        <Row style={{padding: `25px 0`}}>
          <Card

            title="班组打分"
            bordered={false}
            style={{height: 350, width: '100%'}}>
            <Row style={{padding: `20px 0`}}>
              <DatePicker
                placeholder="日期选择"
                onChange={this.banBieTimePick}/>
            </Row>

            <Descriptions bordered>
              <Descriptions.Item span={1} label="早班分数">{morningScore.toFixed(2)} {morningBanci}</Descriptions.Item>
              <Descriptions.Item span={1} label="评级">{morningComment}</Descriptions.Item>
              <Descriptions.Item span={1} label="日期">{displayBanbieDate}</Descriptions.Item>

              <Descriptions.Item span={1} label="中班分数">{noonScore.toFixed(2)} {noonBanci}</Descriptions.Item>
              <Descriptions.Item span={1} label="评级">{noonComment}</Descriptions.Item>
              <Descriptions.Item span={1} label="日期">{displayBanbieDate}</Descriptions.Item>


              <Descriptions.Item span={1} label="晚班分数">{nightScore.toFixed(2)} {nightBanci}</Descriptions.Item>
              <Descriptions.Item span={1} label="评级">{nightComment}</Descriptions.Item>
              <Descriptions.Item span={1} label="日期">{displayBanbieDate}</Descriptions.Item>
            </Descriptions>

          </Card>
        </Row>
      </PageHeaderWrapper>
    )
  }
}


export default connect(({gaolu, global}) => ({
  daliyScore: gaolu.daliyScore,
  banbieScore: gaolu.banbieScore,
  global
}))(Banzu);
